<template>
   <!-- 添加顶级组织 -->
   <div class="addMask">
      <el-dialog
         v-model="open"
         :title="title"
         width="40%"
      >
         <el-form
            :model="formData"
            ref="formDataRef"
            label-width="100px"
            :rules="rules"
         >
            <el-form-item
               label="上级组织："
               prop="parentOrg"
            >
               <el-input
                  disabled
                  v-model="formData.parentOrg"
                  style="width: 400px"
               />
            </el-form-item>
            <el-form-item
               label="组织名称："
               prop="name"
            >
               <el-input
                  v-model="formData.name"
                  placeholder="请输入组织名称"
                  style="width: 400px"
               />
            </el-form-item>
            <el-form-item
               label="组织编号："
               prop="num"
            >
               <el-input
                  v-model="formData.num"
                  placeholder="格式为ORG+4位随机数"
                  style="width: 400px"
               />
               <el-button
                  type="success"
                  style="margin-left: 10px"
                  @click="generateWorkNo"
                  >分配组织编号</el-button
               >
            </el-form-item>
            <el-form-item
               label="组织类型："
               prop="type"
            >
               <el-radio-group v-model="formData.type">
                  <el-radio
                     value="1"
                     label="部门"
                  ></el-radio>
                  <el-radio
                     value="2"
                     label="公司"
                  ></el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item
               label="描述说明："
               prop="content"
            >
               <el-input
                  type="textarea"
                  v-model="formData.content"
                  placeholder="请输入描述说明"
                  :autosize="{ minRows: 5 }"
                  style="width: 400px"
               />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button
                  type="success"
                  @click="submitDialog"
                  >立即提交</el-button
               >
               <el-button @click="open = false">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup>
   import api from "@/api/index.js";
   import { ElMessage } from "element-plus";
   const open = ref(false);
   import { ref, defineEmits } from "vue";
   const emit = defineEmits(["refresh"]);
   const formRef = ref(null);

   // 表单数据初始化
   const formData = ref({
      id: null, // 组织id
      name: "", // 组织名称
      parentOrg: "", // 上级组织
      parentId: null, // 上级组织id
      type: "", // 组织类型
      status: "", // 状态
      config: "", // 配置
      content: "", // 描述
      num: "",
      parent_id: 0, // 无上级组织时参数为零
   });
   // 打开弹窗方法
   const handleDialog = () => {
      formData.value = {
         id: "",
         name: "",
         parentOrg: "",
         parentId: "",
         type: "",
         status: "",
         config: "",
         content: "",
         num: "",
         parent_id: 0,
      };
      open.value = true;
   };
   // 去空
   const clearEmpty = () => {
      let newFormData = Object.keys(formData.value).reduce((acc, key) => {
         if (formData.value[key] !== "" && formData.value[key] !== null && formData.value[key] !== undefined) {
            acc[key] = formData.value[key];
         }
         return acc;
      }, {});
      return newFormData;
   };
   // 添加顶级组织
   const addTopOrg = async () => {
      const res = await api.authority.addOrganization(clearEmpty());
      if (res.code == 200) {
         emit("refresh");
         ElMessage.success("添加成功");
      }
   };
   // 计算属性
   const title = computed(() => {
      return formData.value.id ? "编辑组织" : "新增组织";
   });
   // 生成组织编号
   const generateWorkNo = async () => {
      // 这里可以调用接口生成工号，或使用前端生成的临时工号
      const res = await api.authority.getRanNum({ type: "org" });
      if (res.code == 200) {
         formData.value.num = String(res.data);
      }
   };
   // 定义验证规则
   const rules = reactive({
      name: [
         { required: true, message: "请输入组织名称", trigger: "blur" },
         { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
      ],
      num: [
         { required: true, message: "请输入组织编号", trigger: "blur" },
         { type: 'string', message: "组织编号必须是字符串", trigger: "blur" },
         { pattern: /^ORG\d{4}$/, message: "组织编号格式必须为ORG加4位数字", trigger: "blur" }
      ],
      type: [{ required: true, message: "请选择组织类型", trigger: "change" }],
      content: [
         { required: false }, // 可选字段，可以根据需求修改
         { max: 200, message: "描述不能超过200个字符", trigger: "blur" },
      ],
   });

   const formDataRef = ref(null);

   // 添加顶级组织
   const handleAddTop = () => {
      open.value = true;
   };

   // 提交表单
   const submitDialog = () => {
      formDataRef.value.validate((valid) => {
         if (valid) {
            addTopOrg();
            open.value = false;
         }
      });
   };

   defineExpose({
      handleDialog,
   });
</script>

<style lang="scss" scoped>
   .dialog-footer {
      display: flex;
      justify-content: center;
      margin-top: 20px;
   }
</style>
